<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
		*{ margin: 0; padding: 0; }
		body{ background: #f2f2f2; }
		ul{ width: 200px; margin: 50px auto; list-style: none; text-align: center; background: #fff; }
		li{ width: 50px; height: 50px; position: relative; background: #aaa; }
		ul li:hover{ width: 200px; transition:all ease 0.2s;}
		a{ text-decoration: none; color: #333; display: block; width: 150px; line-height: 50px; position: absolute; left: 50px; top: 0; }
		a:hover{ color: #fff; }
		
		li:nth-child(1){ background:#B3C833 url("./images/icoa1.png") no-repeat 12px center; }
		li:nth-child(2){ background:#CE5043 url("./images/icoa2.png") no-repeat 12px center; }
		li:nth-child(3){ background:#FB8521 url("./images/icoa3.png") no-repeat 12px center; }
		li:nth-child(4){ background:#1AA1E1 url("./images/icoa4.png") no-repeat 12px center; }
		li:nth-child(5){ background:#5E5CA6 url("./images/icoa5.png") no-repeat 12px center; }
		li:nth-child(6){ background:#658092 url("./images/icoa6.png") no-repeat 12px center; }
	
	</style>
</head>
<body>
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">影视</a></li>
		<li><a href="#">音乐</a></li>
		<li><a href="#">图书</a></li>
		<li><a href="#">记事</a></li>
		<li><a href="#">设备</a></li>
	</ul>
</body>
</html>